<template>
  <div class="app-container d-flex"
       v-loading="loading"
       element-loading-text="拼命加载中"
       element-loading-spinner="el-icon-loading">
    <div class="h-100 w-7">
      <!-- 宿舍区设备故障查询 -->
      <div class="h-100 w-100 p10">
        <div class="h-100 w-100 item_border p10">
          <div class="item_title">
            <div class="d-flex align-items-center">
              <div class="success_point"></div>
              <div class="font-white font-14">宿舍区设备故障查询</div>
            </div>
          </div>
          <div class="item_content">
            <div class="height-20 w-100 pl-3">
              <el-form size="medium" :inline="true" :model="formInline" :rules="rules" ref="accountModelRef"
                       class="demo-form-inline">
                <el-form-item label="类型:" prop="type">
                  <el-select v-model="formInline.type" placeholder="请选择" @change="selectChange">
                    <el-option
                      v-for="item in options2"
                      :key="item.value"
                      :label="item.name"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="区域:" prop="reportNameQy" v-if="formInline.type==0">
                  <el-cascader
                    v-model="formInline.reportNameQy"
                    placeholder="选择区域"
                    ref="cascaderRef"
                    :options="qyOptions"
                    :props="{ checkStrictly: true, label: 'name', expandTrigger: 'hover' }"
                    clearable></el-cascader>
                </el-form-item>
                <el-form-item label="设备:" prop="reportNameSb" v-else>
                  <el-select v-model="formInline.reportNameSb" filterable placeholder="请选择">
                    <el-option
                      v-for="item in sbOptions"
                      :key="item.deviceCode"
                      :label="item.deviceName"
                      :value="item.deviceCode">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="时间范围" prop="time">
                  <el-date-picker
                    v-model="formInline.time"
                    :picker-options="pickerOptions"
                    @change="handleTimeChange"
                    :default-time="defaultTime"
                    value-format="yyyy-MM-dd HH:mm:mm"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
                  </el-date-picker>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" :disabled="addOrUpdateLoading" @click="onSubmit">查询</el-button>
                </el-form-item>
              </el-form>
            </div>
            <div class="height-80 w-100 d-flex-center">
              <div class="h-100 w-100" id="line-first"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="h-100 w-5">
      <!-- 宿舍区设备故障查询 -->
      <div class="h-100 w-100 p10">
        <div class="h-100 w-100 item_border p10">
          <div class="item_title">
            <div class="d-flex align-items-center">
              <div class="success_point"></div>
              <div class="font-white font-14">宿舍区设备故障查询</div>
            </div>
          </div>
          <div class="item_content">
            <div class="h-100 w-100 d-flex-center">
              <div class="h-100 w-100 d-flex flex-column">
                <el-table
                  :data="tableData"
                  height="100%"
                  class="flex-1 over-auto-y"
                  :row-class-name="tableRowClassName"
                  style="width: 100%;height: 100%;">
                  <el-table-column type="index" label="序号" width="70" align="center"/>
                  <el-table-column prop="deviceName" label="设备名称" align="center"></el-table-column>
                  <el-table-column prop="parameterValueName" label="故障类型" width="150" align="center"></el-table-column>
                  <el-table-column prop="createTime" label="故障时间" width="150" align="center"></el-table-column>
                </el-table>
                <div class="d-flex justify-content-end" style="background: rgba(14, 71, 84, 0.67);">
                  <pagination
                    class="pagination"
                    :total="count"
                    :page.sync="pageIndex"
                    :limit.sync="pageSize"
                    @pagination="pagination"
                  />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import charts from './chart.js'
  import {
    queryDeviceReportList,
  } from "@/api/user.js"
  import {
    queryReportError,
    queryReportErrorByPage
  } from "@/api/electrician/index.js"
  import { queryItemsList } from "@/api/user";

  export default {
    components: {},
    data() {
      return {
        timeout: [],

        formInline: {
          reportNameQy: [],
          reportNameSb: "",
          time: [],
          type: "0"
        },
        rules: {
          reportNameQy: [{required: true, message: '请选择区域', trigger: 'change'}],
          reportNameSb: [{required: true, message: '请选择设备', trigger: 'change'}],
          time: [{required: true, message: '请选择时间范围', trigger: 'change'}],
          type: [{required: true, message: '请选择类型', trigger: 'change'}],
        },
        loading: false,
        addOrUpdateLoading: false,

        oneCarData: {
          xData: ['暂无数据'],
          seriesData: [0],
        },
        twoCardData: {
          xData: [],
          seriesData: [],
        },
        qyOptions: [],
        sbOptions: [],
        options2: [{
          value: "0", name: "区域"
        }, {
          value: "1", name: "设备"
        }],
        tableData: [],
        count: 0,
        pageIndex: 1,
        pageSize: 20,

        reportName: "",
        deviceCodeList: "",
        startTime: "",
        endTime: "",
        defaultTime: ['00:00:00', '23:59:59'],
        pickerOptions: {
          disabledDate(time) {
            const now = new Date();
            now.setMonth(now.getMonth() - 2);
            // 获取两个月前的时间的时间戳
            const twoMonthsAgo = now.getTime();

            let today = new Date()
            today.setHours(23, 59, 59, 999)
            let todayTime = today.getTime()

            return time.getTime() > todayTime || time.getTime() < twoMonthsAgo; // 不可选今天之后的日期
          }
        }
      }
    },
    watch: {
      'formInline.reportNameQy': {
        handler(newValue, oldValue) {
          if (this.$refs.cascaderRef) {
            this.$refs.cascaderRef.dropDownVisible = false
          }
        },
        deep: true
      }
    },
    created() {
      this.queryItemsList()
      this.queryDeviceReportList()
    },
    mounted() {
      charts.lineEchart('line-first', this.oneCarData)
      // let _this = this;
      // this.timeout[0] = setInterval(() => {
      //   _this.queryReportError()
      // }, 30000);
      // this.queryReportErrorByPage()
    },
    beforeDestroy() {
      if (this.timeout.length > 0) {
        this.timeout.forEach(item => {
          clearInterval(item);
        })
      }
    },
    methods: {
      tableRowClassName({row, rowIndex}) {
        if (rowIndex % 2 === 0) {
          return 'warning-row';
        } else {
          return 'success-row';
        }
      },
      selectChange(val) {
        if (val == 0) {
          this.formInline.reportNameSb = ""
        } else {
          this.formInline.reportNameQy = []
        }
      },
      queryItemsList() {
        queryItemsList().then(res => {
          this.qyOptions = res.object || []
        })
      },
      queryDeviceReportList() {
        queryDeviceReportList().then(res => {
          this.sbOptions = res.object || []
        })
      },
      handleTimeChange(value) {
        if (value && value.length === 2) {
          const startTime = new Date(value[0]).getTime()
          const endTime = new Date(value[1]).getTime()
          if (endTime - startTime < 2 * 60 * 60 * 1000) { // 6小时的毫秒数
            this.$message.error('结束时间必须晚于开始时间2小时');
            // 重置时间范围
            this.formInline.time = [];
          }
        }
      },

      onSubmit() {
        this.$refs.accountModelRef.validate(async (v) => {
          if (v) {
            let that = this
            this.loading = true
            this.addOrUpdateLoading = true
            this.pageIndex = 1
            let reportName = ""
            let deviceCodeList = ""
            if (this.formInline.type == 0) {
              reportName = this.formInline.reportNameQy[this.formInline.reportNameQy.length - 1]
            } else {
              deviceCodeList = this.formInline.reportNameSb
            }

            let startTime = this.formInline.time[0]
            let endTime = this.formInline.time[1]

            this.reportName = reportName
            this.deviceCodeList = deviceCodeList
            this.startTime = startTime
            this.endTime = endTime
            this.queryReportErrorByPage()

            queryReportError({
              reportName: reportName,
              deviceCodeList: deviceCodeList,
              startTime: startTime,
              endTime: endTime,
            }).then(res => {
              let tempData = res.object

              this.oneCarData.xData = tempData.xData
              this.oneCarData.seriesData = tempData.seriesData1

              charts.lineEchart('line-first', this.oneCarData)
              that.loading = false
              that.addOrUpdateLoading = false
            }).catch(() => {
              that.loading = false
              that.addOrUpdateLoading = false
            })
          }
        })
      },
      queryReportErrorByPage() {
        queryReportErrorByPage({
          pageIndex: this.pageIndex,
          reportName: this.reportName,
          deviceCodeList: this.deviceCodeList,
          startTime: this.startTime,
          endTime: this.endTime,
        }).then(res => {
          let tempData = res.object
          this.tableData = tempData.data
          this.count = tempData.count
        }).catch(() => {

        })
      },
      pagination(pageItem) {
        this.queryReportErrorByPage(pageItem.page, pageItem.limit)
      },

    }
  }
</script>
<style lang="scss" scoped>
  .height-20 {
    height: 20%;
  }

  .height-80 {
    height: 80%;
  }

  .item_title {
    width: 100%;
    height: 5%;
  }

  .item_content {
    width: 100%;
    height: 95%;
  }

  ::v-deep.el-form-item--medium .el-form-item__label {
    color: #ffffff !important;
    font-family: Source Han Sans CN, Source Han Sans CN-500;
    font-weight: 500;
  }

  ::v-deep.el-button--primary {
    /*color: #fff;*/
    /*background-color: #1A2F2D;*/
    /*border-color: #1A2F2D;*/
  }

  .font-white {
    font-family: Source Han Sans CN, Source Han Sans CN-500;
    font-weight: 500;
    color: #ffffff;
  }
</style>

<style lang="scss">
  .el-cascader-node .el-radio__inner {
    border-radius: 0;
    border: 0;
    width: 170px;
    height: 34px;
    background-color: transparent;
    cursor: pointer;
    box-sizing: border-box;
    position: absolute;
    top: -18px;
    left: -19px;
  }

  .el-cascader-node .el-radio__input.is-checked .el-radio__inner {
    background: transparent;
  }

  .el-table--enable-row-hover .el-table__body tr:hover > td {
    background-color: #0d515a !important;
  }

  .el-table th.el-table__cell {
    background-color: #204B5D !important;
    color: #ffffff;
  }

  .el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf {
    border-bottom: 1px solid #204B5D !important;
  }

  .el-table, .el-table__expanded-cell {
    background: rgba(14, 71, 84, 0.67);
  }

  .el-table::before {
    height: 0px !important;
  }

  .el-table .warning-row {
    background: rgba(14, 71, 84, 0.67);
    color: #ffffff;
  }

  .el-table .success-row {
    background: rgba(14, 71, 84, 0.67);
    color: #ffffff;
  }

  .el-table--scrollable-y .el-table__body-wrapper {
    scrollbar-width: none !important; /* Firefox */
    -ms-overflow-style: none !important; /* IE and Edge */
    background: rgba(14, 71, 84, 0.67);
  }
</style>
